import { forwardRef } from 'react'
import { cn } from '../../lib/utils'

export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
  label?: string
}

const Switch = forwardRef<HTMLInputElement, SwitchProps>(
  ({ className, label, ...props }, ref) => {
    return (
      <label className="inline-flex items-center cursor-pointer">
        <div className="relative">
          <input
            type="checkbox"
            className="sr-only"
            ref={ref}
            {...props}
          />
          <div className={cn(
            "block bg-muted w-14 h-8 rounded-full transition-colors",
            props.checked && "bg-primary",
            className
          )}>
            <div className={cn(
              "dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition-transform",
              props.checked && "transform translate-x-6"
            )} />
          </div>
        </div>
        {label && <span className="ml-3 text-sm font-medium">{label}</span>}
      </label>
    )
  }
)
Switch.displayName = 'Switch'

export { Switch }
